<template>
  <!-- 新增问题 -->
  
  <div>
    <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>

        
            <el-form ref="formData" :model="formData" :rules="ruleForm"> 
            <el-form-item label="项目名称" prop="projectId" class="item-1">
            <el-select v-model="formData.projectId" placeholder="请选择项目" class="select">
              <el-option
                v-for="item in rolelist"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="反馈问题" prop="problemDescription" class="item-2">
              <!-- <el-input v-model="formData.problemDescription" placeholder="请输入具体问题"   
               class="input"></el-input> -->
               <el-input
                type="textarea"
                :rows="8"
                placeholder="请输入具体问题"
                v-model="formData.problemDescription"
                class="input">
                </el-input>
            </el-form-item>
            </el-form>

            
            <div class='container'>
                <el-button  type="primary"  @click="dialogVisible = true"
                class="change-1">
                    提交反馈
                </el-button>
                <el-button  type="primary"  @click="back"
                class="change-2">
                    返回
                </el-button>
            </div>

        <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        append-to-body
        top="20%"
        > 
        <!-- append-to-body出现不会屏幕变暗,top位置下调  -->
        <span>确认提交吗</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="newchange">确 定</el-button>
        </span>
        </el-dialog>

          <el-dialog
          title="提示"
          :visible.sync="error"
          width="30%"
          append-to-body
          top="20%"
          ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
          <span>{{ message }}</span>
          <span slot="footer" class="dialog-footer">
              <el-button @click="error = false">取 消</el-button>
              <el-button type="primary" @click="error = false">确 定</el-button>
          </span>
          </el-dialog>
  </div>
</template>

<script>
    
//引入混入

import http from "@/utils/request"


export default {
  data() {
    //页面格式化 ctrl+alt+l
    return {
      ruleForm: {
        projectId: [
          {required: false, message: '请输入具体问题', trigger: 'blur'},
        ],
        problemDescription: [
          {required: false, message: '请输入具体问题', trigger: 'blur'},
        ],
        
      },

      formData: {
        userId:"",
        projectId:"",
        problemDescription: "", 
        name:"",
      },
      error:false,
      dialogVisible:false,
      message:'',
      rolelist: [{
        id: '',
        name: ''
      }, ],
      value: '',
    }
  },
  
  methods: {
    back(){
        this.$router.push('/Feedback')
    },

    getporject(){
        let formData1 = {
          userId:sessionStorage.getItem('userId')
        };
        
        http.get(`${'/client/getproject'}?${new URLSearchParams(formData1).toString()}`).then(res => {
           console.log(res)
           if(res.data.code =='200'){
              this.rolelist = res.data.data;
           }
           else{
            this.$message.error('出现错误')
           }
        })

    },

    newchange(){
            let user=sessionStorage.getItem("userId")
            this.formData.userId=user
            //增加数据
            if(true){
                http.post('/client/addproblem', 
                  this.formData
                ).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.dialogVisible = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.$router.push('/Feedback')
                    }
                    else {
                        this.dialogVisible = false
                        this.message=res.data.msg;
                        this.error=true;
                        
                        
                    }
                })
            }
    }
  },
  mounted(){
    this.getporject()
  }
};
</script>

<style scoped>
.notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */




.item-1 >>> .el-form-item__label {
  font-size: 20px;
}
.item-2 >>> .el-form-item__label {
  font-size: 20px;
}
.item-1{
    margin-left: 400px;
    margin-top: 50px;
    
}
.item-2{
    margin-left: 400px;
    margin-top: 100px;
    
}

.input{
    margin-left: 20px;
    width: 500px;
    height: 20px ;
}
.select{
    margin-left: 20px;
}

.change-1{
     margin-left: 500px;
     margin-top: 300px;
     
     width: 150px;
}/* 按钮 */
.change-2{
     margin-right: 450px;
     margin-top: 300px;
     width: 150px;
}/* 按钮 */
.container {
  display: flex;
  justify-content: space-between; /* 使其两边对齐 */
  align-items: center; /* 使其垂直居中 */
}
</style>